<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin: 10px 0">
      添加
    </el-button>
    <!-- 表格 -->
    <GenericTable :data="tableData" :columns="columns">
      <template #actions="scope">
        <el-button type="danger" @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </GenericTable>

    <!-- 弹窗 -->
    <GenericDialogForm
      :dialogTitle="isEdit ? '编辑角色' : '添加角色'"
      :dialogWidth="'30%'"
      v-model:visible="dialogVisible"
      :formData="isEdit ? editFormData : formData"
      :formFields="formFields"
      :formRules="formRules"
      @confirm=" handleConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import GenericDialogForm from "@/component/GenericDialogForm.vue";
import GenericTable from "@/component/GenericTable.vue";
import {
  getAllRolesAPI,
  addRoleAPI,
  deleteRoleAPI,
} from "@/service/login/role";
import cache from "@/utils/cache";
import Swal from "sweetalert2";

onMounted(async () => {
  await getAllRoles();
});
// 弹窗是否可见
const dialogVisible = ref(false);

// 定义表单字段
const formFields = ref([{ label: "角色名", prop: "name", type: "input" }]);

// 定义表单数据
const formData = reactive({
  id: 0,
  name: "",
});

// 定义表单规则
const formRules = ref({
  name: [{ required: true, message: "角色名不能为空", trigger: "blur" }],
});

// 添加按钮
const handleAdd = () => {
  dialogVisible.value = true;
  isEdit.value = false;
};
// 确认按钮
const handleConfirm = async () => {
  const token = cache.getCache("token");
  const res = await addRoleAPI(token, formData);
  if (res.statusCode === 200) {
    Swal.fire({
      title: "成功",
      text: "添加角色成功",
      icon: "success",
    });
    await getAllRoles();
  } else {
    Swal.fire({
      title: "失败",
      text: "添加角色失败",
      icon: "error",
    });
  }
};

// 定义表格列
const columns = ref([
  { prop: "id", label: "ID", width: 180 },
  { prop: "name", label: "角色名" },
]);

interface TableData {
  id: number;
  name: string;
}
// 定义表格数据
const tableData = ref<TableData[]>([]);
// 获取所有角色
const getAllRoles = async () => {
  const token = cache.getCache("token");
  const res = await getAllRolesAPI(token);
  if (res.statusCode === 200) {
    tableData.value = res.data;
  } else {
    Swal.fire({
      title: "失败",
      text: "获取角色失败",
      icon: "error",
    });
  }
};

// 编辑表单数据
const editFormData = reactive({
  id: 0,
  name: "",
});
const isEdit = ref(false);

// 删除按钮
const handleDelete = async (row: any) => {
  Swal.fire({
    title: "确定删除吗？",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(async (result) => {
    if (result.isConfirmed) {
      const token = cache.getCache("token");
      const res = await deleteRoleAPI(token, row.id);
      if (res.statusCode === 200) {
        Swal.fire({
          title: "成功",
          text: "删除角色成功",
          icon: "success",
        });
        await getAllRoles();
      } else {
        Swal.fire({
          title: "失败",
          text: "删除角色失败",
          icon: "error",
        });
      }
    }
  });
};
</script>
